<template>
    <div class="material-calendar-parent">
        <el-date-picker
            v-model="year"
            type="year"
            placeholder="选择年"
            @change="onChange"
        />
        <el-row :gutter="24">
            <el-col :span="8" v-for="(n, i) in 12" :key="i">
                <Calendar
                    :year="year.getFullYear()"
                    :month="i"
                    :key="n"
                    :workList="workList"
                    :weekendList="weekendList"
                    :workRestOffList="workRestOffList"
                >
                </Calendar>
            </el-col>
        </el-row>
    </div>
</template>
  
  <script>
import Calendar from "../components/workcalendarItem.vue";
import schedulingHttp from "@/https/scheduling.js";
import moment from "moment";

export default {
    components: { Calendar },
    data() {
        return {
            year: new Date(),
            workList: ["20220206", "20230107", "20230311"],
            weekendList: [
                { date: "20220118", market: "马来西亚,泰国" },
                { date: "20230123", market: "中国澳门,韩国" },
                { date: "20230213", market: "中国香港,美国" },
                { date: "20230313", market: "中国台湾,法国" },
            ],
            workRestOffList: [
                "20220101",
                "20220105",
                "20230101",
                "20230105",
                "20230218",
                "20230322",
                "20230330",
            ],
            holidayList: [],
        };
    },
    mounted() {},
    methods: {
        onChange(v) {
            this.year = v;
        },
    },
};
</script>
  
  <style lang="less">
.material-calendar-parent {
    .el-col {
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
}
</style>
  